<template>
	<view class="charts-box">
		<view style="text-align: center;padding-bottom: 15px;">注浆压力情况</view>
		<qiun-data-charts type="area" :opts="opts" :chartData="chartData" ontouch canvas2d />
	</view>
</template>

<script>
	import QiunDataCharts from '../../components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
	export default {
		components: {
			QiunDataCharts
		},
		data() {
			return {
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['tarea'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4',
						'#ea7ccc'
					],
					padding: [10, 45, 0, 15],
					enableScroll: true,
					dataLabel: false,
					dataPointShape: false,
					legend: {
						show: false,
						position: 'top',
						float: 'right',
						itemGap: 20
					},
					xAxis: {
						boundaryGap: 'justify',
						disableGrid: true, // 禁用网格线
						scrollShow: true, // 开启横向滚动
						scrollAlign: 'left', // 滚动后左对齐
						itemCount: 4
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 8,
						showTitle: true,
						data: [{
							title: '注浆压力/MPa',
							titleFontSize: 14,
							titleOffsetY: -2,
							titleOffsetX: 30
						}]
					},
					extra: {
						area: {
							type: 'curve',
							opacity: 1,
							addLine: true,
							width: 3,
							gradient: true,
							activeType: 'hollow'
						},
						markLine: {
							// type: 'dash'
						}
					}
				},
			};
		},
		methods: {
			getServerData(data) {
				const {
					dateArray,
					dataArray
				} = data
				this.chartData = {
					categories: dateArray.length ? dateArray : ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00'],
					series: dataArray.map(item => ({
						name: '水泥注浆量',
						color: item.color,
						data: item.dataList.map(item1 => item1.data),
						legendShape: 'circle',
						pointShape: 'circle'
					}))
				};
			}
		}
	};
</script>

<style scoped lang="scss">
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	// .charts-box {
	// 	width: 100%;
	// 	height: 300px;
	// }
</style>